<script setup lang="ts">
import { ref } from 'vue';
import Pane from './conmponents/Pane.vue';
import BGPage from './conmponents/BGPage.vue';
import Tables from './conmponents/Tables.vue';
import EchartDemo from './conmponents/EchartDemo.vue';
import EChatsStudy from './conmponents/EChatsStudy.vue';

let isShowGifBG = ref(true)
</script>

<template>
    <div class="main">
        <BGPage v-if="isShowGifBG">
            <div class="title">
                <span>爱仪监控大屏11</span>
            </div>
            <div class="context">
                <div class="row1">
                    <EchartDemo style="width: 100%; height: 40vh;" />
                    <EChatsStudy style="width: 100%; height: 40vh;" />
                    <Pane style="width: 100%; height: 40vh;"></Pane>
                </div>
                <div class="row2">
                    <Pane style="width: 67vw; height: 50vh;"></Pane>
                    <Tables style="width: 33vw; height: 50vh;" />
                </div>
            </div>
        </BGPage>
        <GifBGPage v-else>

        </GifBGPage>
    </div>
</template>
<style scoped>
.row1 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.row2 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.main {
    /* background: url(../inages/BG_star.png); */
    width: 100vw;
    height: 100vh;
}

.title {
    background: url(../inages/title_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 10%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.title>span {
    font-size: 2.5vh;
    color: white;
}
</style>